<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
	<h:head>
    	<title>Zeus</title>

	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/faces/main.css" />
		
		<h:panelGroup rendered="#{(not cadastrarUsuario.clienteLogado) and (not administradorAction.admLogado)}">
			<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/faces/public/stylesheets/camera/camera.css" />
			<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/faces/public/stylesheets/mapa/mapa.css" />
			<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/faces/public/stylesheets/validacao/validacao.css" />
			<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/faces/public/stylesheets/validacao/validacaoForm.css" />
			<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/faces/public/stylesheets/calendario/jquery.ui.datepicker.css" />
		</h:panelGroup>
		
		<link rel="shortcut icon" type="image/jpg" href="#{facesContext.externalContext.requestContextPath}/faces/public/images/logo.jpg" />

		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/carregarCss.js"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/ancora/waypoints.min.js" ></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/ancora/jquery.anchor.js" ></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/ancora/ancora.js" charset="UTF-8"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/modernizr.js" ></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/aparencia.js" charset="UTF-8"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/formulario/mascara/jquery.maskedinput-1.3.min.js" ></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/formulario/validacao/jquery.validationEngine.js" charset="UTF-8"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/formulario/validacao/jquery.validationEngine-pt.js" charset="UTF-8"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/calendario/jquery.ui.datepicker.js" charset="UTF-8"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/calendario/jquery.ui.datepicker-pt-BR.js" charset="UTF-8"></script>
		
		<h:panelGroup rendered="#{(not cadastrarUsuario.clienteLogado) and (not administradorAction.admLogado)}">
			<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/camera/camera.min.js" ></script>
			<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/camera/jquery.easing.1.3.js" ></script>
			<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/camera/jquery.mobile.customized.min.js" ></script>
			<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/camera/iniciarCamera.js" ></script>
			<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/galeriaImagens/galeriaImagens.js" ></script>

			<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/formulario/mascara/mascaraForm.js" ></script>
			
			<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/formulario/validacao/validacao.js" charset="UTF-8"></script>

			<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/calendario/calendario.js" charset="UTF-8"></script>
			<script type="text/javascript" src="https://www.google.com/jsapi"></script>
			<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/mapa/mapa.js"></script>
		</h:panelGroup>

    </h:head>
    
    <h:body>
    	<header>
    		
				<div id="cabecalho">
					<p:messages id="mensagens" showDetail="true" autoUpdate="true" />
					<a href="/" title="Zeus">
						<h1>
							Zeus <br /> Easy Hostel
						</h1>
					</a>

					<nav>						
			 			<ul id="menuTopoLista">
			 				<ui:insert name="menu">
				 				<li><a href="hotel" class="nav ancora">Hotel</a></li>
				 				<li><a href="quartos" class="nav ancora">Quartos</a></li>
				 				<li><a href="reserva" class="nav ancora">Reserva</a></li>
								<li><a href="contato" class="nav ancora">Contato</a></li>
								<li>	
				 					<a href="" class="nav" id="login" style="cursor: pointer">Login</a>
				 					
				 					<div id="login">
				 						<div id="fechar" title="fechar">x</div>
				 					
				 						<h:form id="formLogin">
				 							<label for="email">Email:</label>
			            	  				<h:inputText id="email" value="#{loginAction.chave}" styleClass="inputCampos" />
			            	  				
						         	  		<label for="senha">Senha:</label>
						         	  		<h:inputSecret id="senha" value="#{loginAction.senha}" styleClass="inputCampos"/>
					         	  		
					         	  			<h:commandButton value="Entrar" action="#{loginAction.logar()}" styleClass="inputBotao" />
				 						</h:form>
				 						
				 						<a href="" title="Esqueci minha senha">Esqueceu sua senha?</a>
				 					</div>		<!-- fim #login -->
				 				</li>
							</ui:insert>
			 				
			 			</ul>	
			 			
					
			 		</nav>				<!-- fim nav -->		
    		
	    	</div>				<!-- fim #cabecalho -->

			<div class="divisoria"></div>
	    	
    	</header> 			<!-- fim cabeçalho -->
    	
    	<h:panelGroup rendered="#{(not cadastrarUsuario.clienteLogado) and (not administradorAction.admLogado)}">
			<div id="galeriaDeImagens">
				<div data-src="#{facesContext.externalContext.requestContextPath}/faces/public/images/quartos/quarto1.jpg"></div>
				<div data-src="#{facesContext.externalContext.requestContextPath}/faces/public/images/quartos/quarto2.jpg"></div>
				<div data-src="#{facesContext.externalContext.requestContextPath}/faces/public/images/quartos/samsara.jpg"></div>
				<div data-src="#{facesContext.externalContext.requestContextPath}/faces/public/images/quartos/taipa.jpg"></div>
	  		</div>				<!-- fim #galeriaDeImagens -->
		</h:panelGroup>
		
    	<div id="principal">
    		
    		<div id="principalConteudo">
    			<div id="conteudo">
    				<article>
    			<ui:insert name="conteudo">
	    				<h1 id="hotel" class="lugarAncora"> 
							Hotel
						</h1>
						<hr />						
			
						<div id="hotel" class="linha">
							<section>
								<h2>Simples e</h2>
								<h3>Elegante</h3>
								<p>
									Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois 										divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi 									eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois 										paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso 									pudia ce receita de bolis, mais bolis eu num gostis.
									<br />
									
									<a href="linkQuartos"> Veja nossos quartos </a>
								</p>
							</section>
		
							<section>
								<h2>Econômico e</h2>
								<h3>Satisfatório</h3>
								<p>
									Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no
 									mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus
									a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh
 									ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis.
									Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum
									dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue.
									Aenean justo massa. 
									<br /> <a href="linkReserva"> Faça sua reserva </a>
								</p>
							</section>

							<section>
								<h2>Aconchegante e</h2>
								<h3>Sofisticado</h3>
								<p>
									Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois
									divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi
									eros vermeio, in elementis
	 								mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti
									palavris qui num significa
							 		nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num
									gostis.
									<br />
									
									<a href="linkQuartos"> Confira nossas instalações </a>
								</p>
							</section>
						</div>			<!-- fim .linha -->

						<h1 id="quartos" class="lugarAncora"> Quartos </h1>
						<hr/>

						<div id="quartosMiniImagens" class="linha">
						
							<div class="quartoAtual">
								<img src="#{facesContext.externalContext.requestContextPath}/faces/public/images/quartos/quarto3.jpg" title="Quarto 1" />
								
								<div class="quartoDescricaoAtual">
									<h3> Quarto 1 </h3>
									<h5> Simples </h5>
										
									<p>
										Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois
										divoltis porris, paradis.
									</p>
								</div>
							</div>
						
							<div class="quartosVer">
								<a>
									<img src="#{facesContext.externalContext.requestContextPath}/faces/public/images/quartos/quarto3.jpg" title="Quarto 1" />	
									<p class="verQuartoHover" title="Ver">Ver</p>
									
									<div class="quartoDescricao">
										<h3> Quarto 1 </h3>
										<h5> Simples </h5>
										
										<p>
											Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois
											divoltis porris, paradis.
										</p>
									</div>
								</a>
							</div>

							<div class="quartosVer">
								<a>
									<img src="#{facesContext.externalContext.requestContextPath}/faces/public/images/quartos/quarto4.jpg" title="Quarto 2" />	
									<p class="verQuartoHover" title="Ver">Ver</p>
									
									<div class="quartoDescricao">
										<h3> Quarto 2 </h3>
										<h5> Simples </h5>
										
										<p>
											Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis.
											Interagi
											no mé, cursus quis, vehicula ac nisi.
										</p>
									</div>
								</a>
							</div>

							<div class="quartosVer">
								<a>
									<img src="#{facesContext.externalContext.requestContextPath}/faces/public/images/quartos/quarto5.jpg" title="Samsara" />
									<p class="verQuartoHover" title="Ver">Ver</p>
									
									<div class="quartoDescricao">
										<h3> Samsara </h3>
										<h5> Duplo </h5>
										
										<p>
											Interessantiss quisso pudia ce receita de bolis, mais bolis eu num
											gostis.
										</p>
									</div>
								</a>	
							</div>

							<div class="quartosVer">
								<a>
									<img src="#{facesContext.externalContext.requestContextPath}/faces/public/images/quartos/quarto6.jpg" title="Taipa" />			
									<p class="verQuartoHover" title="Ver">Ver</p>
									
									<div class="quartoDescricao">
										<h3> Taipa </h3>
										<h5> Duplo </h5>
										
										<p>
											Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi
											eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia
											nois paga. Sapien in monti palavris qui num significa nadis i pareci latim.
										</p>
									</div>
								</a>
							</div>

						</div>			<!-- fim linha -->
						
						<h1 id="reserva" class="lugarAncora"> Reserva </h1>
						<hr />
						
						<div id="reserva" class="linha divForm">
						
							<div id="avisoReserva">
								<h3> Para reservar um quarto é necessário estar cadastrado no sistema. </h3>
								<a href="#" id="login"> Já sou cadastrado </a>
							</div>
							
							
							
							<h:form id="formReserva">

								<div class="inputs">
									<label>Nome:</label>
			            	  		<h:inputText value="#{cadastrarUsuario.hospede.nome}" id="nome" styleClass="validate[required] text-input"/>
			            	  		
			            	  		<label>CPF:</label>
			            	  		<h:inputText value="#{cadastrarUsuario.hospede.CPF}" id="cpf" styleClass="validate[required,custom[cpf]] text-input" />
			            	  		
			            	  		<label>RG:</label>
			            	  		<h:inputText value="#{cadastrarUsuario.hospede.RG}" id="rg" maxlength="11" styleClass="validate[required, custom[rg]] text-input" />
			            	  		
			            	  		<label>Data de Nascimento:</label>
			            	  		<h:inputText value="#{cadastrarUsuario.hospede.dataNascimento}" id="dataNascimento" styleClass="validate[required, funcCall[checarIdade]] text-input datepicker">
			            	  			<f:convertDateTime pattern="dd/MM/yyyy"/>
			            	  		</h:inputText>	
		            	  		</div>
								
								
								<div class="inputs">
									<div class="inputLinha menor primeiro">
										<label>Pais:</label>
						      		<h:inputText value="#{cadastrarUsuario.hospede.endereco.pais}" />
				         	  	</div>
				         	  		
				         	  	<div class="inputLinha maior">
						      		<label>Estado:</label>
						      		<h:selectOneMenu id="estadoInput"
										value="#{cadastrarUsuario.hospede.endereco.estado}" effect="fade" style="margin-bottom: 2%" styleClass="inputCampos">
										<f:selectItem itemLabel="Selecione..." />
										<f:selectItems value="#{cadastrarUsuario.estados}" var="estado"
										itemLabel="#{estado}" itemValue="#{estado}" />				
									</h:selectOneMenu>
						      	</div>
		            	  		
		            	  		<label>Cidade:</label>
		            	  		<h:inputText value="#{cadastrarUsuario.hospede.endereco.cidade}" id="cidade" styleClass="validate[required] text-input"/>
		            	  		
		            	  		<label>CEP</label>
		            	  		<h:inputText value="#{cadastrarUsuario.hospede.endereco.CEP}" id="cep" styleClass="validate[required, custom[cep]]"/>
		            	  		
		            	  		<div class="inputLinha maior primeiro">
				         	  		<label>Rua:</label>
				         	  		<h:inputText value="#{cadastrarUsuario.hospede.endereco.logradouro}" />
			         	  		</div>
									
									<div class="inputLinha menor">		            	  		
				         	  		<label>Número:</label>
				         	  		<h:inputText value="#{cadastrarUsuario.hospede.endereco.numero}" id="numero"/>
									</div>
		            	  	</div>
		            	  	
		            	  	<div class="inputs">
									<label>Telefone:</label>
		            	  		<h:inputText value="#{cadastrarUsuario.hospede.telefone}" id="telefone"/>
		            	  		
		            	  		<label>Email:</label>
		            	  		<h:inputText value="#{cadastrarUsuario.hospede.email}" id="email" styleClass="validate[required, custom[email]]"/>
		            	  		
		            	  		<label>Senha:</label>
		            	  		<h:inputSecret value="#{cadastrarUsuario.senha1}" id="senha" styleClass="validate[required, minSize[6]] text-input inputCampos"/>
		            	  		
		            	  		<label>Repita a senha:</label>
		            	  		<h:inputSecret value="#{cadastrarUsuario.senha2}" id="senha2" styleClass="validate[required, minSize[6]] text-input, inputCampos"/>
		            	  	</div>
		            	  	
                	  		<h:commandButton action="#{cadastrarUsuario.cadastrar}" value="Cadastrar" id="botaoCadastrar"/>

							</h:form>
						
						</div>			<!-- fim linha -->
					</ui:insert>
       			</article>		<!-- fim article -->
				 	
    			</div>			<!-- fim #conteudo -->
    			
	    		
    		</div>			<!-- fim #principalConteudo -->
    		
    	</div>			<!-- fim #principal -->

   		<footer>
   			<h:panelGroup rendered="#{(not cadastrarUsuario.clienteLogado) and (not administradorAction.admLogado)}">
		
	   			<div id="contato" class="lugarAncora">
						
						<div class="linha">
	
							<div id="onde">
								<h3> Onde? </h3>
	
								<div id="mapa"></div>
							</div>				<!-- fim #onde -->
	
							<div id="contatoDados">
	
								<h3> Contato </h3>
	
								<ul>
									<li class="contatoDadosEsquerdo">Telefone:</li>
									<li>(84) 1234-5678</li>
	
									<li class="contatoDadosEsquerdo">Email:</li>
									<li>zeus.easyHostel@zeus.com.br</li>
	
									<li class="contatoDadosEsquerdo">Endereço:</li>
									<li>Rua Venenatis, 1234 <br /> Iptsumo - Natal/RN</li>
								</ul>
	
							</div>				<!-- fim #contato -->
	
							<div id="contatoEmail">
								<h3> Mande-nos um email </h3>
	
								<form action="" id="formContato">
	
									<label>Nome:</label>
	               	  		<input type="text" placeholder="Nome" name="nome" id="nome" title="nome"/>
	
									<label>Email:</label>
	               	  		<input type="text" placeholder="Email" name="email" id="email"  title="email" />
	
									<label>Mensagem:</label>
									<textarea placeholder="Digite sua Mensagem" name="mensagem" rows="10" title="mensagem"></textarea>
	                	  		<input type="submit" name="enviar" value="Enviar" alt="Enviar" title="Enviar" />
	
								</form>
	
							</div>				<!-- fim #contatoEmail -->
	
						</div>				<!-- fim #linha -->
			    		
		    		</div>				<!-- fim #contato -->
		    	</h:panelGroup>

				<div id="rodape">
				
					<div>
	
						<a href="/" >
							<p id="logo"> Zeus <br /> Easy Hostel </p>
						</a>						

						<ul>
							<li>
								<a class="iconTwitter" href="https://twitter.com/ZeusEasyHostel" target="_blank"></a>
								<a class="iconFacebook" href="https://www.facebook.com/ZeusEasyHostel" target="_blank"></a>
							</li>
			
							<li>
								<p>© Zeus | Easy Hostel</p>
							</li>
						</ul>
					
					</div>					<!-- fim semNome -->

				</div>				<!-- fim #rodape -->
	    	
   		</footer>			<!-- fim rodapé -->
   		
   		<div id="irParaTopo" title="Levai-me para cima, Sir.">
   			<p style="cursor: pointer">Topo</p>
   			<!-- <img src="public/images/topo.jpg'" /> -->
   		</div>
    </h:body>
    
</html>
